<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入初始化 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入购物车样式 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="car">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="all">全选
                    </th>
                    <th>
                        商品
                    </th>
                    <th>
                        单价
                    </th>
                    <th>
                        商品数量
                    </th>
                    <th>
                        小计
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!-- td1 -->
                    <td>
                        <input type="checkbox">
                    </td>
                    <!-- td2 -->
                    <td>
                        <img src="uploads/01.jpg">
                        <p>牛奶</p>
                    </td>
                    <td>
                        <span class="price">20</span>￥
                    </td>
                    <td>
                        <div class="count-c clearfix">
                            <button href="javascript:" class="reduce disabled" disabled>-</button>
                            <input type="text" value="1">
                            <button href="javascript:" class="add">+</button>
                        </div>
                    </td>
                    <td>
                        <span class="xiaoji">20</span>￥
                    </td>
                    <td>
                        <a href="javascript:" class="del">删除</a>
                    </td>

                </tr>
                <tr>
                    <!-- td1 -->
                    <td>
                        <input type="checkbox">
                    </td>
                    <!-- td2 -->
                    <td>
                        <img src="uploads/02.jpg">
                        <p>三只松鼠</p>
                    </td>
                    <td>
                        <span class="price">20</span>￥
                    </td>
                    <td>
                        <div class="count-c clearfix">
                            <button href="javascript:" class="reduce disabled" disabled>-</button>
                            <input type="text" value="1">
                            <button href="javascript:" class="add">+</button>
                        </div>
                    </td>
                    <td>
                        <span class="xiaoji">20</span>￥
                    </td>
                    <td>
                        <a href="javascript:" class="del">删除</a>
                    </td>

                </tr>
                <tr>
                    <!-- td1 -->
                    <td>
                        <input type="checkbox">
                    </td>
                    <!-- td2 -->
                    <td>
                        <img src="uploads/03.jpg">
                        <p>蓝牙音箱</p>
                    </td>
                    <td>
                        <span class="price">60</span>￥
                    </td>
                    <td>
                        <div class="count-c clearfix">
                            <button href="javascript:" class="reduce disabled" disabled>-</button>
                            <input type="text" value="1">
                            <button href="javascript:" class="add">+</button>
                        </div>
                    </td>
                    <td>
                        <span class="xiaoji">60</span>￥
                    </td>
                    <td>
                        <a href="javascript:" class="del">删除</a>
                    </td>

                </tr>
                <tr>
                    <!-- td1 -->
                    <td>
                        <input type="checkbox">
                    </td>
                    <!-- td2 -->
                    <td>
                        <img src="uploads/04.jpg">
                        <p>大米</p>
                    </td>
                    <td>
                        <span class="price">120</span>￥
                    </td>
                    <td>
                        <div class="count-c clearfix">
                            <button href="javascript:" class="reduce disabled" disabled>-</button>
                            <input type="text" value="1">
                            <button href="javascript:" class="add">+</button>
                        </div>
                    </td>
                    <td>
                        <span class="xiaoji">120</span>￥
                    </td>
                    <td>
                        <a href="javascript:" class="del">删除</a>
                    </td>

                </tr>

            </tbody>
        </table>
        <div class="controls clearfix">
            <a href="javascript:" class="del-all">删除所选商品</a>
            <a href="javascript:" class="clear">清理购物车</a>
            <a href="javascript:" class="pay">去结算</a>
            <p>
                已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
            </p>
        </div>
    </div>
    <!-- 提示购物车为空 -->
    <div class="info">购物车为空</div>
    <script src="lib/jquery-1.12.4.js"></script>
    <!-- <script src="js/car.js"></script> -->
</body>
<script>
    $('thead input').click(function () {
        var ss = $(this).prop('checked');
        $('tbody input[type="checkbox"]').prop('checked', ss);
        getSum();
    });
    $('tbody input[type="checkbox"]').click(function () {
        var len1 = $('tbody input[type="checkbox"]').length;
        var len2 = $('tbody input[type="checkbox"]:checked').length;

        $('thead input').prop('checked', len1 == len2);
        getSum();
    });

    function getSum() {
        var cks = $('tbody input[type="checkbox"]:checked');
        var total1 = 0; var total2 = 0;
        for (var i = 0; i < cks.length; i++) {
            var tr = cks.eq(i).parent().parent();

            var count = tr.find('input[type="text"]').val();
            total1 += Number(count);

            var xiaoji = tr.find('.xiaoji').text();
            total2 += Number(xiaoji);
        }
        $('#totalCount').text(total1);
        $('#totalPrice').text(total2 + '￥');
    }

    // 删除
    $('.del').click(function () {
        if (confirm('确定删除？')) {
            $(this).parent().parent().remove();
        }
        getSum();
    })
    $('.add').click(function () {
        $(this).parent().parent().parent().find('input[type="checkbox"]').prop('checked', true);
        var s1 = Number($(this).prev().val());
        s1++
        $(this).prev().val(s1);
        if (s1 > 1) {
            $('.reduce').removeClass('disabled');
            $('.reduce').prop('disabled', false);
        }
        var danjia = $(this).parent().parent().prev()
            .find('.price').text();
        var xiaoji = $(this).parent().parent().next()
            .find('.xiaoji').text(danjia * s1);
        getSum();
    })
    $('.reduce').click(function () {
        $(this).parent().parent().parent().find('input[type="checkbox"]').prop('checked', true);
        var s2 = Number($(this).next().val());
        s2--
        $(this).next().val(s2);
        if (s2 < 2) {
            $('.reduce').addClass('disabled');
            $('.reduce').prop('disabled', true);
        }
        var danjia = $(this).parent().parent().prev()
            .find('.price').text();
        var xiaoji = $(this).parent().parent().next()
            .find('.xiaoji').text(danjia * s2);
        getSum();
    })
    $('.del-all').click(function () {
        if (confirm('是否删除！')) {
            $('tbody input[type="checkbox"]:checked').parent().parent().remove();
        }
        getSum();
    })
    $('.clear').click(function () {
        if(confirm('是否删除！') == true) {
            $('tbody').remove();
            $('.info').css('display',block);
        }
    })
    
</script>

</html>